<template>
  <view class="fashion-container">
    <!-- 顶部安全区域 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="back-btn" @click="goBack">
        <image class="back-icon" src="https://i.ibb.co/nq8B8z3P/comeback.png" mode="aspectFit"></image>
      </view>
      <view class="page-title">信息填写</view>
      <!-- 添加空的占位元素，保持标题居中 -->
      <view class="placeholder-btn" style="width: 60rpx; height: 60rpx;"></view>
    </view>
    
    <view class="form-content">
      <!-- 简介文字 -->
      <view class="intro-text">
        灵感与个人风格，让AI为你创造最适合的穿搭方案
      </view>
      
      <!-- 基本信息 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-icon">◆</text>
          <text class="title-text">出生信息</text>
          <text class="required-tag">（必填）</text>
        </view>
        <view class="form-item">
          <text class="item-label">出生日期</text>
          <view class="date-picker">
            <picker mode="date" @change="onDateChange" style="width: 100%;">
              <view class="picker-container">
                <view class="picker-value">{{ birthDate || '年/月/日' }}</view>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
        <view class="form-item">
          <text class="item-label">出生时间</text>
          <view class="time-picker">
            <picker mode="time" @change="onTimeChange" style="width: 100%;">
              <view class="picker-container">
                <view class="picker-value">{{ birthTime || '-- : --' }}</view>
                <text class="picker-arrow">⌚</text>
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <!-- 上传照片 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-icon">◆</text>
          <text class="title-text">上传照片</text>
          <text class="required-tag">（必填）</text>
        </view>
        <view class="upload-container">
          <!-- 未上传照片时显示上传区域 -->
          <view class="upload-area" v-if="!modelImageUrl">
            <view class="upload-icon-container">
              <image class="upload-icon" src="https://i.ibb.co/yBM9cF3S/up-cloud.png" mode="aspectFit"></image>
            </view>
            <view class="upload-tips">
              上传您的个人照片，AI将为您生成最适合的穿搭
              <br>支持JPG、PNG、JPEG格式，大小不超过10MB
            </view>
            <view class="upload-buttons">
              <button class="upload-btn primary" @click="showPhotoConfirm('camera')">拍照</button>
              <button class="upload-btn secondary" @click="showPhotoConfirm('album')">从相册选择</button>
            </view>
          </view>
          
          <!-- 已上传照片时显示照片预览 -->
          <view class="image-preview-container" v-if="modelImageUrl">
            <image :src="modelImageUrl" mode="aspectFit" class="preview-image"></image>
            <view class="image-actions">
              <view class="action-btn change-btn" @click.stop="openUploadNoticeModal">更换</view>
              <view class="action-btn delete-btn" @click.stop="removeImage('model')">删除</view>
            </view>
            <view class="upload-success-tip">
              <text class="success-icon">✓</text>
              <text class="success-text">上传成功</text>
            </view>
          </view>
        </view>
      </view>
      
      
      <!-- 职业填写 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-icon">◆</text>
          <text class="title-text">职业</text>
          <text class="required-tag">（必填）</text>
        </view>
        <view class="form-item">
          <text class="item-label">职业</text>
          <view class="date-picker" @click="toggleCareerList" style="position:relative;">
            <view class="picker-container">
              <input
                class="picker-value"
                v-model="career"
                placeholder="请输入或选择职业"
                @click.stop="toggleCareerList"
                style="background:transparent;border:none;width:100%;"
              />
              <text class="picker-arrow">▼</text>
            </view>
            <view v-if="showCareerList" class="career-list-popup">
              <view
                class="career-list-item"
                v-for="tag in careerTags"
                :key="tag"
                @click.stop="selectCareerTag(tag)"
              >{{ tag }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 场景 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-icon">◆</text>
          <text class="title-text">经常出入场景</text>
          <text class="required-tag">（必填）</text>
        </view>
        <view class="style-options">
          <view class="style-row">
            <view class="style-option" :class="{ active: isStyleSelected('休闲') }" @click="toggleStyle('休闲')">
              <image class="style-icon" src="https://i.ibb.co/zK13Fjr/free.png" mode="aspectFit"></image>
              <text class="style-text">休闲</text>
            </view>
            <view class="style-option" :class="{ active: isStyleSelected('商务') }" @click="toggleStyle('商务')">
              <image class="style-icon" src="https://i.ibb.co/hxGW6J0r/office.png" mode="aspectFit"></image>
              <text class="style-text">商务</text>
            </view>
            <view class="style-option" :class="{ active: isStyleSelected('运动') }" @click="toggleStyle('运动')">
              <image class="style-icon" src="https://i.ibb.co/xSddwYgD/sport.png" mode="aspectFit"></image>
              <text class="style-text">运动</text>
            </view>
          </view>
          <view class="style-row">
            <view class="style-option" :class="{ active: isStyleSelected('约会') }" @click="toggleStyle('约会')">
              <image class="style-icon" src="https://i.ibb.co/9kwRVxQF/love.png" mode="aspectFit"></image>
              <text class="style-text">约会</text>
            </view>
            <view class="style-option" :class="{ active: isStyleSelected('聚会') }" @click="toggleStyle('聚会')">
              <image class="style-icon" src="https://i.ibb.co/jFHg5Tk/home.png" mode="aspectFit"></image>
              <text class="style-text">聚会</text>
            </view>
            <view class="style-option" :class="{ active: isStyleSelected('旅行') }" @click="toggleStyle('旅行')">
              <image class="style-icon" src="https://i.ibb.co/Qv7kCWP7/trip.png" mode="aspectFit"></image>
              <text class="style-text">旅行</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 风格偏好 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-icon">◆</text>
          <text class="title-text">风格偏好</text>
          <text class="required-tag">（必填）</text>
        </view>
        <view class="tag-options">
          <view class="tag" :class="{ active: isTagSelected('甜美') }" @click="toggleTag('甜美')">甜美</view>
          <view class="tag" :class="{ active: isTagSelected('优雅') }" @click="toggleTag('优雅')">优雅</view>
          <view class="tag" :class="{ active: isTagSelected('通勤') }" @click="toggleTag('通勤')">通勤</view>
          <view class="tag" :class="{ active: isTagSelected('性感') }" @click="toggleTag('性感')">性感</view>
          <view class="tag" :class="{ active: isTagSelected('休闲') }" @click="toggleTag('休闲')">休闲</view>
          <view class="tag" :class="{ active: isTagSelected('青春') }" @click="toggleTag('青春')">青春</view>
          <view class="tag" :class="{ active: isTagSelected('复古') }" @click="toggleTag('复古')">复古</view>
          <view class="tag" :class="{ active: isTagSelected('运动') }" @click="toggleTag('运动')">运动</view>
          <view class="tag" :class="{ active: isTagSelected('简约') }" @click="toggleTag('简约')">简约</view>
        </view>
      </view>
    </view>
    
    <!-- 照片上传确认弹窗 -->
    <view class="photo-confirm-modal" v-if="showPhotoModal">
      <view class="modal-mask" @click="closePhotoModal"></view>
      <view class="modal-content photo-confirm-new">
        <view class="modal-header-new">
          <text>— 上传形象须知 —</text>
        </view>
        <view class="modal-section">
          <view class="modal-subtitle success">＜ 正确示例 ＞<text class="check"></text></view>
          <view class="photo-examples-row">
            <image class="photo-example" src="https://i.ibb.co/39BjxBxn/true-1.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/39BjxBxn/true-1.png')"></image>
            <image class="photo-example" src="https://i.ibb.co/kRRH6DN/true-2.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/kRRH6DN/true-2.png')"></image>
            <image class="photo-example" src="https://i.ibb.co/F4Rwr9X2/true-3.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/F4Rwr9X2/true-3.png')"></image>
            <image class="photo-example" src="https://i.ibb.co/DfBrkJzX/true-4.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/DfBrkJzX/true-4.png')"></image>
          </view>
          <view class="modal-desc">支持不同性别、肤色、年龄（6岁以上）的人物图。<br>人物全身正面照，光照良好。人物手部展示完整，避免手持交叉遮挡等情况。</view>
        </view>
        <view class="modal-section">
          <view class="modal-subtitle error">＜ 错误示例 ＞<text class="wrong"></text></view>
          <view class="photo-examples-row">
            <image class="photo-example" src="https://i.ibb.co/Kx3XLKJL/false-4.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/Kx3XLKJL/false-4.png')"></image>
            <image class="photo-example" src="https://i.ibb.co/rKd56K0H/false-3.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/rKd56K0H/false-3.png')"></image>
            <image class="photo-example" src="https://i.ibb.co/9mYSNzQR/false-1.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/9mYSNzQR/false-1.png')"></image>
            <image class="photo-example" src="https://i.ibb.co/Q71YKbMB/false-2.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/Q71YKbMB/false-2.png')"></image>
          </view>
          <view class="modal-desc">不要上传非正面全身照（避免上传侧脸、坐姿、躺姿、半身照片）；<br>多人照片；人物加装道具（避免手持物、包等）；光线过暗/模糊不清。</view>
        </view>
        <view class="modal-section safety"></view>
        <view class="modal-section bottom-row">
          <view class="modal-bottom-row-flex">
            <view class="modal-checkbox-row">
              <view class="checkbox" :class="{checked: photoConfirmChecked}" @click="togglePhotoConfirmCheck">
                <text v-if="photoConfirmChecked">√</text>
                <text v-else>☐</text>
              </view>
              <text class="checkbox-label">下次不再显示弹窗</text>
            </view>
            <text class="promise-link" @click="openPromiseModal">查看安全承诺</text>
          </view>
          <view class="modal-btn-row">
            <button class="modal-btn disagree" @click="closePhotoModal">不同意</button>
            <button class="modal-btn agree" @click="confirmUploadPhoto">同意</button>
          </view>
          <view class="modal-tip">上传不符合标准的照片，可能导致生成效果不佳哦！</view>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-btn-container">
      <button class="generate-btn" @click="generateOutfit">生成我的穿搭推荐</button>
    </view>
    
    <!-- 安全承诺弹窗放在最外层view的最后 -->
    <view class="promise-modal" v-if="showPromiseModal">
      <view class="promise-mask" @click="closePromiseModal"></view>
      <view class="promise-content">
        <view class="promise-title-row">
          <text class="promise-title">安全承诺</text>
          <text class="promise-close" @click="closePromiseModal">×</text>
        </view>
        <view class="promise-item">1. 我们保证数据安全，请放心使用。</view>
        <view class="promise-item">2. 请确保你使用的照片获得本人授权同意，严禁使用未获得本人授权同意的照片。</view>
        <view class="promise-item">3. 请确保上传照片内容健康、合法，不涉及任何违法或不道德的内容。</view>
      </view>
    </view>
    
    <!-- 大图预览弹窗 -->
    <view v-if="showExamplePreview" class="example-preview-modal">
      <view class="example-preview-mask" @click="closeExamplePreview"></view>
      <image :src="examplePreviewUrl" class="example-preview-img" mode="widthFix"></image>
    </view>
    
    <UploadNoticeModal
      :show="showUploadNotice"
      :localKey="uploadNoticeLocalKey"
      @update:show="showUploadNotice = $event"
      @agree="handleUploadAgree"
      @disagree="handleUploadDisagree"
    />
  </view>
</template>

<script>
import UploadNoticeModal from '@/components/UploadNoticeModal.vue';

export default {
  components: {
    UploadNoticeModal,
  },
  data() {
    return {
      statusBarHeight: 20, // 默认状态栏高度
      birthDate: '',
      birthTime: '',
      career: '', // 新增职业字段
      careerTags: ['学生', '教师', '医生', '工程师', '设计师', '程序员', '销售', '自由职业', '企业管理', '公务员', '媒体/自媒体', '金融', '律师', '艺术家', '其他'],
      styles: [],
      tags: [],
      modelImage: '', // 本地图片路径
      modelImageUrl: '', // 服务器返回的图片URL
      weather: '',
      mood: '',
      // Coze API 相关配置
      cozeApiUrl: 'https://api.coze.cn/v3/chat',
      cozeAuthToken: 'pat_s65ntx3AzCHQnX0xlOr0H8CXW44y5OjybZp6yUzuUnSDTTeol9IvxC6JtMrihfVV',
      botId: '7488929898816798757',
      isCallingCoze: false, // API调用状态
      cozeResponseData: {}, // 存储API返回的完整数据对象
      cozeAnalysisResults: '', // 存储解析后的分析结果
      // 缓存相关
      cacheKey: 'try_on_form_data', // 缓存的键名
      locationInputTimer: null, // 用于防抖处理
      
      // 弹窗相关
      showPhotoModal: false, // 控制确认弹窗显示
      photoConfirmChecked: false, // 是否勾选下次不再显示
      photoConfirmNeverShow: false, // 是否永久不再显示弹窗
      currentPhotoSource: '', // 当前选择的照片来源: 'camera' 或 'album'
      showPromiseModal: false, // 控制安全承诺弹窗显示
      showExamplePreview: false,
      examplePreviewUrl: '',
      showCareerList: false,
      showUploadNotice: false,
      uploadNoticeLocalKey: 'hideUploadNoticeModal_try_on_detail_model',
    }
  },
  onLoad() {
    // 获取状态栏高度
    this.getStatusBarHeight();
    
    // 加载缓存的表单数据
    this.loadCachedFormData();
    
    // 尝试加载之前上传的模特图片（如果有）
    const cachedModelImage = uni.getStorageSync('ai_try_on_model');
    if (cachedModelImage) {
      this.modelImageUrl = cachedModelImage;
    }
    
    // 检查是否永久不再显示弹窗
    this.photoConfirmNeverShow = uni.getStorageSync('photo_confirm_never_show') === 'true';
  },
  onUnload() {
    // 页面卸载时保存表单数据
    this.saveFormDataToCache();
  },
  methods: {
    getStatusBarHeight() {
      try {
        const res = uni.getSystemInfoSync();
        this.statusBarHeight = res.statusBarHeight || 20;
      } catch (e) {
        console.error('获取系统信息失败', e);
      }
    },
    goBack() {
      uni.switchTab({
        url: '/pages/AI_try_on/home_page'
      });
    },
    onDateChange(e) {
      this.birthDate = e.detail.value;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    onTimeChange(e) {
      this.birthTime = e.detail.value;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    
    // 显示照片确认弹窗
    showPhotoConfirm(source) {
      this.currentPhotoSource = source;
      // 只要没勾选"下次不再显示弹窗"，每次都弹窗
      if (this.photoConfirmNeverShow) {
        this.uploadImage('model');
        return;
      }
      this.photoConfirmChecked = false;
      this.showPhotoModal = true;
    },
    
    // 关闭照片确认弹窗
    closePhotoModal() {
      this.showPhotoModal = false;
    },
    
    // 勾选下次不再显示弹窗
    togglePhotoConfirmCheck() {
      this.photoConfirmChecked = !this.photoConfirmChecked;
    },
    
    // 确认上传照片
    confirmUploadPhoto() {
      // 只有勾选了"下次不再显示弹窗"并同意才存储标记
      if (this.photoConfirmChecked) {
        this.photoConfirmNeverShow = true;
        uni.setStorageSync('photo_confirm_never_show', 'true');
      }
      this.showPhotoModal = false;
      this.uploadImage('model');
    },
    
    /**
     * 上传图片到服务器并获取URL
     * @param {String} type - 图片类型，这里是'model'表示模特图片
     */
    uploadImage(type) {
      let that = this;
      that.$util.uploadImageChange('upload/image', (res) => {
        // 上传成功回调
        if (type === 'model') {
          that.modelImage = res.data.url;
          that.modelImageUrl = res.data.url;
          console.log('上传照片成功，服务器返回的URL:', res.data.url);
          
          // 将URL保存到本地存储，方便其他页面使用
          uni.setStorageSync('ai_try_on_model', res.data.url);
          
          // 保存表单数据到缓存
          that.saveFormDataToCache();
        }
        
        // 显示成功提示
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        });
      }, (err) => {
        // 上传失败回调
        console.log('上传照片失败:', err);
        uni.showToast({
          title: '上传失败',
          icon: 'none'
        });
      }, (size) => {
        // 图片尺寸回调
        console.log('图片尺寸:', size.w, size.h);
      });
    },
    selectTime(value) {
      this.time = value;
    },
    toggleStyle(style) {
      // 单选模式：清空数组后添加新选择
      this.styles = [style];
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    isStyleSelected(style) {
      return this.styles.includes(style);
    },
    toggleTag(tag) {
      const index = this.tags.indexOf(tag);
      if (index === -1) {
        this.tags.push(tag);
      } else {
        this.tags.splice(index, 1);
      }
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    isTagSelected(tag) {
      return this.tags.includes(tag);
    },
    generateOutfit() {
      // 在这里添加验证逻辑，确保所有必填项都已填写
      if (!this.birthDate || !this.birthTime || !this.modelImageUrl || !this.career || this.styles.length === 0 || this.tags.length === 0) {
          uni.showToast({
              title: '请填写所有必填项并上传照片',
              icon: 'none',
              duration: 2000
          });
          return; // 阻止进一步执行
      }

      // 保存表单数据到缓存
      this.saveFormDataToCache();
      
      // 调用Coze API
      this.callCozeAPI();
    },
    selectWeather(value) {
      this.weather = value;
    },
    selectMood(value) {
      this.mood = value;
    },
    onTripDateChange(e) {
      console.log('出游日期变更:', e.detail.value);
      this.tripDate = e.detail.value;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    onTripTimeChange(e) {
      console.log('出游时间变更:', e.detail.value);
      this.tripTime = e.detail.value;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    handleTripDateChange(e) {
      console.log('处理出游日期变更:', e.detail.value);
      this.tripDate = e.detail.value;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    handleTripTimeChange(e) {
      console.log('处理出游时间变更:', e.detail.value);
      this.tripTime = e.detail.value;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    // 出游地点相关方法
    onLocationInput() {
      if (this.location) {
        this.filteredLocations = this.locationList.filter(item => 
          item.includes(this.location)
        );
        this.showLocationList = true;
      } else {
        this.filteredLocations = [...this.locationList].slice(0, 15); // 只显示前15个城市避免列表过长
        this.showLocationList = false;
      }
      
      // 当用户输入完成时保存缓存(通过防抖处理)
      if (this.locationInputTimer) {
        clearTimeout(this.locationInputTimer);
      }
      this.locationInputTimer = setTimeout(() => {
        this.saveFormDataToCache();
      }, 500);
    },
    toggleLocationList() {
      this.showLocationList = !this.showLocationList;
      if (this.showLocationList) {
        if (this.location) {
          this.filteredLocations = this.locationList.filter(item => 
            item.includes(this.location)
          );
        } else {
          this.filteredLocations = [...this.locationList].slice(0, 15); // 只显示前15个城市
        }
      }
    },
    selectLocation(location) {
      this.location = location;
      this.showLocationList = false;
      // 保存表单数据到缓存
      this.saveFormDataToCache();
    },
    /**
     * 移除已上传的图片
     * @param {String} type - 图片类型，这里是'model'表示模特图片
     */
    removeImage(type) {
      if (type === 'model') {
        this.modelImage = '';
        this.modelImageUrl = '';
        uni.removeStorageSync('ai_try_on_model');
        console.log('已移除模特照片');
        
        // 更新缓存
        this.saveFormDataToCache();
        
        uni.showToast({
          title: '已删除照片',
          icon: 'success'
        });
      }
    },
    // 生成唯一ID
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    
    // 调用Coze API
    callCozeAPI() {
      if (this.isCallingCoze) return;
      
      this.isCallingCoze = true;
      
      // 显示加载提示
      uni.showLoading({
        title: '智能分析中...',
        mask: true
      });
      
      // 生成唯一任务ID
      const taskId = this.generateUUID();
      
      // 构建用户信息对象 - 确保每个字段都有有效值
      const userInfo = {
        birthdate: this.birthDate || "1995-05-20",
        gender: "female",
        career: this.career || "",
        emotion: "平静",
        style: this.styles[0] || "休闲",
        tags: this.tags.join(',') || "优雅,甜美"
      };
      
      console.log("用户信息:", JSON.stringify(userInfo));
      
      // 创建content内容对象
      const contentObj = {
        task_id: taskId,
        user_info: userInfo
      };
      
      // 打印content对象的完整JSON
      console.log("===== Content对象详情 =====");
      console.log("JSON字符串:", JSON.stringify(contentObj, null, 2));
      console.log("=========");
      
      // 测试content的序列化和反序列化
      try {
        const contentStr = JSON.stringify(contentObj);
        console.log("序列化后的长度:", contentStr.length);
        
        // 检查序列化后的字符串是否可以被正确解析回对象
        const parsedBack = JSON.parse(contentStr);
        console.log("反序列化成功:", 
          parsedBack.task_id === taskId && 
          parsedBack.user_info.birthdate === userInfo.birthdate
        );
        
        // 检查序列化后的字符串是否包含中文
        const hasChinese = /[\u4e00-\u9fa5]/.test(contentStr);
        console.log("包含中文字符:", hasChinese);
        if (hasChinese) {
          console.log("中文字符样例:", contentStr.match(/[\u4e00-\u9fa5]+/)[0]);
        }
      } catch (e) {
        console.error("序列化/反序列化测试失败:", e);
      }
      
      // 创建请求体 - 测试不同格式
      // 方式1: 完整格式（添加所有字段）
      const requestData = {
        bot_id: this.botId,
        user_id: "user_" + Math.floor(Math.random() * 10000),
        stream: false,
        auto_save_history: true,
        conversation_id: "",
        additional_messages: [{
          role: "user",
          content_type: "text",
          content: JSON.stringify(contentObj)
        }]
      };
      
      // 方式2: 简化格式（可选）
      /*
      const requestData = {
        bot_id: this.botId,
        user_id: "user_" + Math.floor(Math.random() * 10000),
        additional_messages: [{
          role: "user",
          content_type: "text",
          content: JSON.stringify(contentObj)
        }]
      };
      */
      
      // 方式3: 直接使用字符串作为content（可选）
      /*
      const requestData = {
        bot_id: this.botId,
        user_id: "user_" + Math.floor(Math.random() * 10000),
        additional_messages: [{
          role: "user",
          content_type: "text",
          content: JSON.stringify({
            task_id: taskId,
            user_info: {
              birthdate: this.birthDate || "1995-05-20",
              gender: "female",
              location: this.location || "杭州西湖"
            }
          })
        }]
      };
      */
      
      // 打印完整请求数据
      console.log("===== API请求详情 =====");
      console.log("请求URL:", this.cozeApiUrl);
      console.log("Authorization: Bearer " + this.cozeAuthToken.substring(0, 10) + "...");
      console.log("请求体:", JSON.stringify(requestData, null, 2));
      
      // 检查关键参数
      console.log("Bot ID是否有效:", this.botId && this.botId.length > 0);
      console.log("Bot ID:", this.botId);
      console.log("用户ID:", requestData.user_id);
      console.log("content长度:", JSON.stringify(contentObj).length);
      console.log("=========");
      
      // 添加一个用于存储原始响应的变量
      let rawResponse = null;
      
      // 发起API请求
      uni.request({
        url: this.cozeApiUrl,
        method: 'POST',
        header: {
          'Authorization': `Bearer ${this.cozeAuthToken}`,
          'Content-Type': 'application/json'
        },
        data: requestData,
        success: (res) => {
          // 保存原始响应
          rawResponse = res;
          console.log("API响应状态:", res.statusCode);
          console.log("API响应头:", JSON.stringify(res.header));
          
          // 完整打印API返回结果到控制台
          console.log("===== API完整响应开始 =====");
          console.log("状态码:", res.statusCode);
          console.log("响应头:", res.header);
          console.log("响应体:", res.data);
          
          // 检查响应体结构
          if (res.data) {
            console.log("响应状态:", res.data.status || "无状态字段");
            console.log("响应ID:", res.data.id || res.data.created_at || "无ID字段");
            
            if (res.data.choices) {
              console.log("choices数组长度:", res.data.choices.length);
              if (res.data.choices.length > 0) {
                console.log("第一个choice:", res.data.choices[0]);
                
                if (res.data.choices[0].message) {
                  console.log("message内容:", res.data.choices[0].message);
                }
                
                if (res.data.choices[0].content) {
                  console.log("content内容:", res.data.choices[0].content);
                }
              }
            } else {
              console.log("无choices数组");
            }
            
            // 检查其他可能的字段
            if (res.data.message) {
              console.log("message字段:", res.data.message);
            }
            
            if (res.data.error) {
              console.log("error字段:", res.data.error);
            }
          }
          console.log("===== API完整响应结束 =====");
          
          try {
            // 检查响应
            if (res.statusCode === 200) {
              console.log("API响应体:", JSON.stringify(res.data).substring(0, 500) + "...");
              
              if (res.data && res.data.choices && res.data.choices.length > 0) {
                const choice = res.data.choices[0];
                let content = '';
                
                // 检查不同的响应格式
                if (choice.message && choice.message.content) {
                  content = choice.message.content;
                  console.log("从message.content获取内容");
                } else if (choice.content) {
                  content = choice.content;
                  console.log("从content直接获取内容");
                } else if (typeof choice === 'string') {
                  content = choice;
                  console.log("choice是字符串");
                } else {
                  console.warn("未能从choice中获取content:", choice);
                  throw new Error("响应中没有找到content");
                }
                
                console.log("API返回内容长度:", content.length);
                if (content.length > 0) {
                  // 尝试解析JSON
                  try {
                    const jsonData = JSON.parse(content);
                    this.cozeResponseData = jsonData;
                    console.log("成功解析JSON数据");
                  } catch (jsonError) {
                    console.error("内容不是有效JSON, 尝试提取:", jsonError);
                    // 尝试从文本中提取JSON对象
                    const jsonMatch = content.match(/\{(?:[^{}]|(\{(?:[^{}]|{[^{}]*})*\}))*\}/);
                    if (jsonMatch) {
                      try {
                        const jsonString = jsonMatch[0];
                        console.log("提取的JSON字符串:", jsonString.substring(0, 100) + "...");
                        const parsedData = JSON.parse(jsonString);
                        this.cozeResponseData = parsedData;
                        console.log("成功从文本提取JSON");
                      } catch (extractError) {
                        console.error("从文本提取JSON失败:", extractError);
                        this.cozeResponseData = this.getDefaultFashionData();
                      }
                    } else {
                      console.error("响应中没有找到JSON对象");
                      this.cozeResponseData = this.getDefaultFashionData();
                    }
                  }
                } else {
                  console.error("API返回内容为空");
                  this.cozeResponseData = this.getDefaultFashionData();
                }
              } else {
                console.error("API响应中没有choices数组:", res.data);
                this.cozeResponseData = this.getDefaultFashionData();
              }
            } else {
              console.error("API响应状态异常:", res.statusCode);
              this.cozeResponseData = this.getDefaultFashionData();
            }
          } catch (e) {
            console.error("处理API响应出错:", e.message);
            this.cozeResponseData = this.getDefaultFashionData();
          }
          
          // 尝试使用默认数据结构
          console.log("最终使用的数据:", JSON.stringify(this.cozeResponseData).substring(0, 200) + "...");
          
          // 跳转到推荐页面
          this.navigateToRecommendation(this.cozeResponseData);
        },
        fail: (err) => {
          console.error("API调用失败:", err);
          uni.showToast({
            title: '命理分析请求失败',
            icon: 'none',
            duration: 2000
          });
          
          // 使用默认数据
          this.cozeResponseData = this.getDefaultFashionData();
          this.navigateToRecommendation(this.cozeResponseData);
          
          // 上报错误日志，方便后续排查
          try {
            uni.request({
              url: '/api/error_log',
              method: 'POST',
              data: {
                type: 'coze_api_error',
                error: JSON.stringify(err),
                request: JSON.stringify(requestData)
              },
              fail: () => {} // 忽略错误上报的失败
            });
          } catch (e) {
            // 忽略错误上报过程中的错误
          }
        },
        complete: () => {
          // 完整记录请求和响应
          console.log("API请求完成，参数:", JSON.stringify(requestData).substring(0, 200) + "...");
          if (rawResponse) {
            console.log("完整响应:", JSON.stringify(rawResponse).substring(0, 200) + "...");
          }
          
          uni.hideLoading();
          this.isCallingCoze = false;
        }
      });
    },
    
    // 获取默认的时尚分析数据
    getDefaultFashionData() {
      console.log("使用默认时尚数据");
      
      // 获取当前日期
      const now = new Date();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      
      // 基于选择的风格推荐不同的服装
      let recommendedClothes = [];
      const selectedStyle = this.styles[0] || "休闲";
      
      switch(selectedStyle) {
        case "休闲":
          recommendedClothes = [
            {
              name: "简约基础T恤",
              description: "舒适面料，百搭款式",
              price: "129",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801338.webp",
              item_type: "top"
            },
            {
              name: "直筒牛仔裤",
              description: "高腰设计，修饰腿型",
              price: "199",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801340.jpeg",
              item_type: "bottom"
            },
            {
              name: "温柔气质V领毛衣",
              description: "舒适亲肤，提升气质",
              price: "159",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801327.jpeg",
              item_type: "top"
            }
          ];
          break;
        case "商务":
          recommendedClothes = [
            {
              name: "修身衬衫",
              description: "精致剪裁，职场必备",
              price: "289",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801327.jpeg",
              item_type: "top"
            },
            {
              name: "西装裤",
              description: "垂坠面料，正式场合首选",
              price: "359",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801340.jpeg",
              item_type: "bottom"
            },
            {
              name: "精致小西装",
              description: "优雅剪裁，提升职场气场",
              price: "499",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801338.webp",
              item_type: "top"
            }
          ];
          break;
        case "约会":
          recommendedClothes = [
            {
              name: "浪漫碎花裙",
              description: "甜美风格，增添气质",
              price: "259",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801338.webp",
              item_type: "bottom"
            },
            {
              name: "蕾丝上衣",
              description: "精致面料，凸显女性魅力",
              price: "229",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801327.jpeg",
              item_type: "top"
            },
            {
              name: "修身牛仔裤",
              description: "凸显腿型，增添活力",
              price: "198",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801340.jpeg",
              item_type: "bottom"
            }
          ];
          break;
        default:
          recommendedClothes = [
            {
              name: "百搭针织衫",
              description: "舒适面料，适合各种场合",
              price: "169",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801338.webp",
              item_type: "top"
            },
            {
              name: "休闲裤",
              description: "简约设计，日常百搭",
              price: "199",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801340.jpeg",
              item_type: "bottom"
            },
            {
              name: "温柔气质V领毛衣",
              description: "精选面料，提升气质",
              price: "159",
              image_url: "https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/1389646171/p801327.jpeg",
              item_type: "top"
            }
          ];
      }
      
      // 根据所选标签生成适合的颜色和风格
      const selectedTags = this.tags.length > 0 ? this.tags : ["优雅", "甜美"];
      let luckyColor = "素雅色系";
      let styleDescription = "";
      
      if (selectedTags.includes("甜美")) {
        luckyColor = "粉色系";
        styleDescription = "甜美风格能增添您的亲和力，今日适合柔和色调。";
      } else if (selectedTags.includes("优雅")) {
        luckyColor = "奶茶色系";
        styleDescription = "优雅风格彰显您的气质，建议选择高级感色彩。";
      } else if (selectedTags.includes("性感")) {
        luckyColor = "红色系";
        styleDescription = "适当的性感元素能提升魅力，注意与场合搭配。";
      } else {
        styleDescription = "简约大方的搭配最适合您今日的行程。";
      }
      
      // 添加推荐服装的物品类型属性
      const recommendations = recommendedClothes.map(item => {
        // 确保所有推荐都有item_type属性
        if (!item.item_type) {
          // 根据名称判断类型
          if ((item.name && item.name.includes('裙')) || 
              (item.name && item.name.includes('裤')) || 
              (item.description && item.description.includes('下装'))) {
            item.item_type = "bottom";
          } else {
            item.item_type = "top";
          }
        }
        return item;
      });
      
      // 基于用户输入生成的默认分析数据
      return {
        "status": "success",
        "result_image_url": "", // 由于没有生成图片，所以这里为空
        "fortune_analysis": {
          "description": `根据您的生辰八字分析，您今日五行缺水，选择${luckyColor}可以平衡您的命理。` + 
                         `您选择的${selectedStyle}场景适合${selectedTags.join('、')}风格。${styleDescription}` + 
                         `${month}月${day}日出行，建议穿着舒适、得体的服装。`,
          "suitable": [luckyColor, "柔软质地", "圆领"],
          "not_suitable": ["纯黑", "尖锐造型"]
        },
        "luck_info": {
          "description": `${month}月${day}日，五行属水，宜着${luckyColor}，提升桃花运势。您选择的` + 
                         `${selectedTags.join('、')}风格能很好地彰显您的个性，适合前往${this.location || '都市'}。`,
          "lucky_color": luckyColor,
          "lucky_accessory": "项链"
        },
        "recommendations": recommendations,
        "lucky_style": `推荐${luckyColor}系搭配，五行属木，适合增强今日运势`
      };
    },
    
    // 跳转到推荐页面
    navigateToRecommendation(cozeData) {
      // ...参数组装
      const params = {
        modelImage: this.modelImageUrl, // 传递模特照片URL
        birthDate: this.birthDate,
        birthTime: this.birthTime,
        career: this.career,
        style: this.styles[0],
        tags: this.tags.join(','),
        showFortuneModules: 'true'
      };
      if (cozeData) {
        try {
          params.cozeData = JSON.stringify(cozeData);
        } catch (e) {}
      }
      // 直接通过url参数传递图片
      uni.navigateTo({
        url: `/pages/recommendation/recommendation?modelImage=${encodeURIComponent(this.modelImageUrl)}`
      });
    },
    // 缓存相关方法
    loadCachedFormData() {
      const cachedData = uni.getStorageSync(this.cacheKey);
      if (cachedData) {
        this.birthDate = cachedData.birthDate;
        this.birthTime = cachedData.birthTime;
        this.career = cachedData.career;
        this.styles = cachedData.styles;
        this.tags = cachedData.tags;
        this.modelImageUrl = cachedData.modelImageUrl;
        this.weather = cachedData.weather;
        this.mood = cachedData.mood;
      }
    },
    saveFormDataToCache() {
      const data = {
        birthDate: this.birthDate,
        birthTime: this.birthTime,
        career: this.career,
        styles: this.styles,
        tags: this.tags,
        modelImageUrl: this.modelImageUrl,
        weather: this.weather,
        mood: this.mood,
      };
      uni.setStorageSync(this.cacheKey, data);
    },
    // 调用API生成数据
    callAPI() {
      if (!this.canSubmit) {
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '正在分析中...',
        mask: true
      });
      
      try {
        // 生成一些基本数据
        const selectedStyle = this.styles[0] || '休闲';
        const currentDate = new Date();
        const month = currentDate.getMonth() + 1;
        const day = currentDate.getDate();
        
        // 创建默认的响应对象
        const defaultResponse = this.generateDefaultData(selectedStyle, month, day);
        
        // 直接使用默认数据并跳转
        console.log('使用默认数据，准备跳转');
        
        // 确保defaultResponse包含choices字段
        if (!defaultResponse.choices) {
          defaultResponse.choices = [];
        }
        
        // 延迟1秒后跳转，模拟API调用
        setTimeout(() => {
          // 隐藏加载提示
          uni.hideLoading();
          
          // 保存信息到缓存
          this.saveFormDataToCache();
          
          // 跳转到推荐页面，并传递生成的数据
          this.navigateToRecommendation(defaultResponse);
        }, 1500);
      } catch (e) {
        console.error('调用API失败:', e);
        uni.hideLoading();
        uni.showToast({
          title: '生成数据失败，请重试',
          icon: 'none'
        });
      }
    },
    openPromiseModal() {
      console.log('点击了安全承诺超链接');
      this.showPromiseModal = true;
    },
    closePromiseModal() {
      this.showPromiseModal = false;
    },
    openExamplePreview(url) {
      this.examplePreviewUrl = url;
      this.showExamplePreview = true;
    },
    closeExamplePreview() {
      this.showExamplePreview = false;
      this.examplePreviewUrl = '';
    },
    selectCareerTag(tag) {
      this.career = tag;
      this.showCareerList = false;
    },
    toggleCareerList() {
      this.showCareerList = !this.showCareerList;
    },
    onCareerPickerChange(e) {
      this.career = this.careerTags[e.detail.value];
    },
    openUploadNoticeModal() {
      const localKey = 'hideUploadNoticeModal_try_on_detail_model';
      if (uni.getStorageSync(localKey)) {
        this.handleUploadAgree(true);
        return;
      }
      this.uploadNoticeLocalKey = localKey;
      this.showUploadNotice = true;
    },
    handleUploadAgree(checked) {
      this.showUploadNotice = false;
      // 继续原有上传逻辑
      this.showPhotoModal = false;
      this.uploadImage('model');
    },
    handleUploadDisagree() {
      this.showUploadNotice = false;
    },
  }
}
</script>

<style lang="scss">
/* 引入字体图标 */
@font-face {
  font-family: 'iconfont';
  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 40rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fashion-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffe6f0, #fff3f8, #ffffff);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 120rpx; // 底部导航栏的高度
  
  .status-bar {
    width: 100%;
    background: linear-gradient(to right, #ffcce0, #ffe6f0);
  }
  
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background: linear-gradient(to right, #ffcce0, #ffe6f0);
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .back-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
    
    .page-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .form-content {
    padding: 20rpx 30rpx;
  }
  
  .intro-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 40rpx;
  }
  
  .form-section {
    margin-bottom: 40rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title-icon {
        color: #e83e8c;
        font-size: 32rpx;
        margin-right: 10rpx;
      }
      
      .title-text {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
      
      .required-tag {
        font-size: 24rpx;
        color: #e83e8c;
        margin-left: 10rpx;
        font-weight: normal;
      }
      
      .optional-tag {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
        font-weight: normal;
      }
    }
  }
  
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .item-label {
      width: 180rpx;
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .date-picker, .time-picker {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    background-color: rgba(255, 255, 255, 0.8);
    
    .picker-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    
    .picker-value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
    
    .picker-arrow {
      font-size: 28rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }
  
  .date-time-picker {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
    
    .form-date-picker, .form-time-picker {
      flex: 1;
    }
  }
  
  .upload-container {
    width: 100%;
    margin-bottom: 20rpx;
    
    .upload-area {
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 12rpx;
      padding: 40rpx;
      text-align: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .upload-icon-container {
        margin-bottom: 20rpx;
        
        .upload-icon {
          width: 100rpx;
          height: 100rpx;
        }
      }
      
      .upload-tips {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
        margin-bottom: 30rpx;
      }
      
      .upload-buttons {
        display: flex;
        justify-content: center;
        gap: 20rpx;
        
        .upload-btn {
          flex: 1;
          max-width: 300rpx;
          height: 80rpx;
          font-size: 28rpx;
          border-radius: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.primary {
            background-color: #e83e8c;
            color: #fff;
          }
          
          &.secondary {
            background-color: #fff;
            color: #e83e8c;
            border: 1px solid #e83e8c;
          }
        }
      }
    }
    
    .image-preview-container {
      position: relative;
      width: 100%;
      aspect-ratio: 3/4; /* 设置固定的宽高比例 */
      max-height: 600rpx; /* 设置最大高度 */
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      background-color: #f5f5f5;
      margin: 0 auto;
      
      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 改为contain确保图片完整显示 */
      }
      
      .image-actions {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        display: flex;
        gap: 20rpx;
        z-index: 2; /* 确保按钮在图片上层 */
        
        .action-btn {
          padding: 12rpx 30rpx;
          border-radius: 30rpx;
          font-size: 28rpx;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          
          &.change-btn {
            background-color: rgba(232, 62, 140, 0.8);
          }
          
          &.delete-btn {
            background-color: rgba(0, 0, 0, 0.6);
          }
        }
      }
      
      .upload-success-tip {
        position: absolute;
        top: 20rpx;
        left: 20rpx;
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        background-color: rgba(80, 200, 120, 0.8);
        border-radius: 30rpx;
        z-index: 2; /* 确保提示在图片上层 */
        
        .success-icon {
          color: #fff;
          font-size: 32rpx;
          margin-right: 8rpx;
        }
        
        .success-text {
          color: #fff;
          font-size: 24rpx;
        }
      }
    }
  }
  
  .location-container {
    position: relative;
  }
  
  .location-input {
    display: flex;
    align-items: center;
    height: 80rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    background-color: rgba(255, 255, 255, 0.8);
    
    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
    }
    
    .search-icon {
      font-size: 32rpx;
      color: #999;
    }
  }
  
  .location-list {
    position: absolute;
    top: 90rpx;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    
    .location-item {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1px solid #f5f5f5;
      
      &:active {
        background-color: #f9f9f9;
      }
    }
    
    .empty-tip {
      padding: 30rpx;
      text-align: center;
      color: #999;
      font-size: 28rpx;
    }
  }
  
  .time-selector {
    display: flex;
    justify-content: space-between;
    
    .time-option {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;
      margin: 0 10rpx;
      border-radius: 8rpx;
      background-color: rgba(255, 255, 255, 0.8);
      
      &.active {
        background-color: #fff5f8;
        border: 1px solid #ffcce0;
      }
      
      .time-icon {
        font-size: 48rpx;
        margin-bottom: 10rpx;
      }
      
      .time-text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  
  .style-options {
    .style-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      .style-option {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx 0;
        margin: 0 10rpx;
        border-radius: 8rpx;
        background-color: rgba(255, 255, 255, 0.8);
        
        &.active {
          background-color: #fff5f8;
          border: 1px solid #ffcce0;
        }
        
        .style-icon {
          width: 64rpx;
          height: 64rpx;
          margin-bottom: 10rpx;
        }
        
        .style-text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
  
  .tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .tag {
      padding: 15rpx 30rpx;
      font-size: 28rpx;
      color: #666;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 30rpx;
      
      &.active {
        background-color: #ffe0eb;
        color: #e83e8c;
      }
    }
  }
  
  .weather-mood-area {
    margin-top: 15rpx;
    margin-bottom: 30rpx;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 16rpx;
    padding: 25rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.9);
    
    .sub-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 18rpx;
      margin-top: 10rpx;
      position: relative;
      padding-left: 20rpx;
      
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10rpx;
        height: 24rpx;
        background-color: #e83e8c;
        border-radius: 5rpx;
      }
    }
    
    .option-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25rpx;
      
      .weather-option, .mood-option {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18rpx 0;
        border-radius: 10rpx;
        background-color: rgba(255, 255, 255, 0.8);
        margin: 0 6rpx;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2rpx);
          box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
        }
        
        &.active {
          background-color: #fff5f8;
          border: 1px solid #ffcce0;
          box-shadow: 0 4rpx 10rpx rgba(232, 62, 140, 0.15);
        }
        
        .option-icon {
          font-size: 40rpx;
          margin-bottom: 10rpx;
          line-height: 56rpx;
          height: 56rpx;
        }
        
        .option-text {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
  
  .bottom-btn-container {
    padding: 30rpx;
    margin-top: auto;
    margin-bottom: 100rpx;
    
    .generate-btn {
      width: 100%;
      height: 90rpx;
      background: linear-gradient(to right, #e83e8c, #ff6da3);
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 12rpx rgba(232, 62, 140, 0.3);
    }
  }
  
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .tab-icon {
        width: 48rpx;
        height: 48rpx;
        opacity: 0.5;
      }
      
      &.active {
        .tab-icon {
          opacity: 1;
        }
      }
    }
  }
}

/* 照片确认弹窗样式 */
.photo-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
  
  .modal-content {
    position: relative;
    width: 80%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .modal-header {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
    color: #333;
  }
  
  .modal-body {
    .example-photo {
      width: 100%;
      height: 300rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30rpx;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      
      .example-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        background-color: #ffcce0;
      }
    }
    
    .not-recommended {
      font-size: 30rpx;
      text-align: center;
      margin: 20rpx 0;
      color: #666;
    }
    
    .photo-examples {
      display: flex;
      justify-content: space-around;
      margin: 20rpx 0 30rpx;
      
      .example-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .example-icon {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          background-color: #f0f0f0;
          margin-bottom: 10rpx;
        }
        
        text {
          font-size: 26rpx;
          color: #666;
        }
      }
    }
    
    .safety-promise {
      padding: 20rpx;
      background-color: #f8f8f8;
      border-radius: 10rpx;
      
      .promise-title {
        font-size: 28rpx;
        color: #333;
        text-align: center;
        margin-bottom: 15rpx;
      }
      
      .promise-item {
        font-size: 24rpx;
        color: #666;
        line-height: 1.5;
        margin-bottom: 10rpx;
      }
    }
  }
  
  .modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    
    .modal-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10rpx;
      
      &.disagree {
        background-color: #f5f5f5;
        color: #666;
      }
      
      &.agree {
        background-color: #e83e8c;
        color: #fff;
      }
    }
  }
}

/* 新弹窗样式优化 */
/* 弹窗整体容器 */
.photo-confirm-modal .photo-confirm-new {
  padding: 0 0 20rpx 0;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(232,62,140,0.10);
}
/* 顶部标题 */
.modal-header-new {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin: 36rpx 0 18rpx 0;
  color: #000000;
  letter-spacing: 2rpx;
}
/* 每个分区 */
.modal-section {
  margin-bottom: 16rpx;
  padding: 0 25rpx;
}
/* 分区小标题 */
.modal-subtitle {
  font-size: 25rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
  letter-spacing: 1rpx;
}
.modal-subtitle.success { color: #2ecc40; }
.modal-subtitle.error { color: #e83e8c; }
.modal-subtitle.safety { color: #333; justify-content: center; font-size: 28rpx; }
.modal-subtitle .check { margin-left: 8rpx; font-size: 26rpx; }
.modal-subtitle .wrong { margin-left: 8rpx; font-size: 26rpx; }
/* 示例图片模板 */
.photo-examples-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rpx;
  gap: 10rpx;
}
/* 示例图片样式 */
.photo-example {
  width: 140rpx;
  height: 280rpx;
  border-radius: 8rpx;
  background: #f7f7f7;
  object-fit: cover;
  box-shadow: 0 2rpx 8rpx rgba(232,62,140,0.04);
  border: 1px solid #f3e6ef;
}
/* 说明文字（除安全承诺外） */
.modal-desc {
  font-size: 22rpx;
  color: #888;
  line-height: 1.6;
  margin-bottom: 4rpx;
  text-align: left;
}
/* 安全承诺样式 */
.modal-desc.safety {
  font-size: 22rpx;
  color: #888;
  background: #f8f8f8;
  border-radius: 8rpx;
  padding: 12rpx 14rpx;
  margin-top: 0;
  line-height: 1.7;
}
/* 底部勾选框模板 */
.modal-section.bottom-row {
  margin-top: 8rpx;
  padding: 0 18rpx;
}
/* 勾选框模板 */
.modal-checkbox-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
/* 勾选框样式 */
.checkbox {
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #e0b2c6;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
  font-size: 20rpx;
  color: #fff;
  background: #fff;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s;
  box-shadow: 0 2rpx 6rpx rgba(232,62,140,0.04);
  cursor: pointer;
}
.checkbox.checked {
  background: linear-gradient(90deg,#e83e8c 0%,#ffb6d5 100%);
  border: 2rpx solid #e83e8c;
  color: #fff;
}
.checkbox text {
  font-size: 20rpx;
  color: inherit;
  line-height: 1;
  font-weight: bold;
  user-select: none;
}
.checkbox:active, .checkbox:hover {
  box-shadow: 0 4rpx 12rpx rgba(232,62,140,0.10);
  border-color: #e83e8c;
}
.checkbox-label {
  font-size: 20rpx;
  color: #b08ca7;
  margin-left: 2rpx;
}
/* 按钮行模板 */  
.modal-btn-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
  gap: 16rpx;
}
/* 按钮样式 */
.modal-btn-row .modal-btn {
  flex: 1;
  height: 64rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  margin: 0;
  box-shadow: 0 2rpx 8rpx rgba(232,62,140,0.04);
}
/* 不同意按钮样式 */
.modal-btn-row .modal-btn.disagree {
  background-color: #f5f5f5;
  color: #888;
  border: 1px solid #eee;
}
/* 同意按钮样式 */
.modal-btn-row .modal-btn.agree {
  background: linear-gradient(90deg,#e83e8c 0%,#ffb6d5 100%);
  color: #fff;
  border: none;
}
/* 提示文字样式 */ 
.modal-tip {
  text-align: center;
  color: #e83e3e;
  font-size: 22rpx;
  margin-top: 4rpx;
  line-height: 1.5;
  letter-spacing: 1rpx;
}

/* 安全承诺弹窗样式 */
.promise-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
}
.promise-mask {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
}
.promise-content {
  position: relative;
  background: #fff;
  border-radius: 28rpx;
  padding: 48rpx 36rpx 36rpx 36rpx;
  min-width: 320rpx;
  max-width: 600rpx;
  box-shadow: 0 8rpx 32rpx rgba(232,62,140,0.13);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.promise-title-row {
  width: 100%;
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 24rpx;
  position: relative;
}
.promise-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #e83e8c;
  text-align: center;
  letter-spacing: 2rpx;
}
.promise-close {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  font-size: 40rpx;
  color: #bbb;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0 8rpx;
}
.promise-close:hover {
  color: #e83e8c;
}
.promise-item {
  font-size: 28rpx;
  color: #555;
  line-height: 2.1;
  margin-bottom: 18rpx;
  width: 100%;
  border-bottom: 1px solid #f3e6ef;
  padding-bottom: 12rpx;
  text-align: left;
}
.promise-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* 超链接样式 */
.promise-link {
  color: #3b7cff;
  text-decoration: underline;
  font-size: 22rpx;
  cursor: pointer;
}

/* 新增样式 */
.modal-bottom-row-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8rpx;
}

/* 大图预览弹窗样式 */
.example-preview-modal {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 3000; display: flex; align-items: center; justify-content: center;
}
.example-preview-mask {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.7);
}
.example-preview-img {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
  z-index: 1;
  border: 4rpx solid rgba(255,255,255,0.5); /* 半透明白色线框 */
}

/* 在.date-picker, .time-picker附近添加如下样式 */
.input-picker {
  flex: 1;
  display: flex;
  align-items: center;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  background-color: rgba(255, 255, 255, 0.8);

  .input-inner {
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
  }
}

/* 在.tag-options附近添加如下样式 */
.career-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 12rpx;
}
.career-tag {
  padding: 12rpx 28rpx;
  font-size: 26rpx;
  color: #666;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 30rpx;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s;
}
.career-tag.active {
  background-color: #ffe0eb;
  color: #e83e8c;
  border: 1px solid #e83e8c;
}

/* 样式补充 */
.picker-icon {
  pointer-events: none;
}

/* 样式补充 */
.career-list-popup {
  position: absolute;
  left: 0; top: 90rpx; width: 100%; z-index: 20;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  max-height: 300rpx;
  overflow-y: auto;
}
.career-list-item {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}
.career-list-item:active {
  background: #f9f9f9;
}

.career-list-mask {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 10;
  background: transparent;
}
.career-list-popup {
  z-index: 20;
}
</style> 